﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>div的折叠效果</title>
  <style type="text/css">
    div.xx{border:solid 1px;overflow:hidden;}
    div.xx h5{
      padding:0;
      margin:0;
      height:30px;
      line-height:30px;
      cursor:pointer;
      background:#eee;}
  </style>
  <script type="text/javascript">
    let mh = 30; 
    let step = 1;
    let ms = 10; 
    
    function toggle(o){
      if (!o.tid)o.tid = "_" + Math.random() * 100;
      if (!window.toggler)window.toggler = {};
      if (!window.toggler[o.tid]){
        window.toggler[o.tid]={
          obj:o,
          maxHeight:o.offsetHeight,
          minHeight:mh,
          timer:null,
          action:1
        };  }
      o.style.height = o.offsetHeight + "px";
      if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
      window.toggler[o.tid].action *= -1;
      window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );//עҢ¼Ɗ±Ʒµē÷¨
    }
    //ͨ¹ý¶ԏ󵄗¸߶Ⱥ͗¸߶ȣ¬Ő¶ϕ۵þʇ·񍣖¹
    function anim(id){
      let t = window.toggler[id];
      let o = window.toggler[id].obj;
      if (t.action < 0){
        if (o.offsetHeight <= t.minHeight){
          clearTimeout(t.timer);
          return;
        }
      }
      else{
        if (o.offsetHeight >= t.maxHeight){
          clearTimeout(t.timer);
          return;
        }
      }
      o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
      window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
    }
  </script>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">՛µþ±ꌢ</h5>
  <p>՛µþĚȝ</p>
  <p>՛µþĚȝ</p>
  <p>՛µþĚȝ</p>
  <p>՛µþĚȝ</p>
</div>
</body>
</html>